<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">
        添加
      </el-button>
    </div>
    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;"
      height="550">
      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="头像" width="64" align="center">
        <template slot-scope="{row}">
          <el-image class="avatar-circular" :src="getAvatarImage(row.avatar)" fit="fit" />
        </template>
      </el-table-column>

      <el-table-column label="账号昵称" width="120" align="center">
        <template slot-scope="{row}">
          <span>{{ row.nickname }}</span>
        </template>
      </el-table-column>

      <el-table-column label="手机号" width="120" align="center">
        <template slot-scope="{row}">
          <span>{{ row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号状态" class-name="status-col" width="120" align="center">
        <template slot-scope="{row}">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusString(row.status) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="会员状态" class-name="status-col" width="120" align="center">
        <template slot-scope="{row}">
          <el-tag :type="getUserStatusType(row.user_status)">
            {{ getUserStatusString(row.user_status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="角色" class-name="status-col" width="120" align="center">
        <template slot-scope="{row}">
          {{$route.query.role}}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" min-width="200" class-name="small-padding fixed-width">
        <template slot-scope="{row, $index}">
          <el-button v-if="$route.query.role != '超级管理员'" size="mini" type="danger" @click="handleDelete(row, $index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 授权 -->
    <el-dialog class="data-form-dialog" title="授权" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :model="temp" label-position="right" label-width="120px">
        <el-form-item label="选择用户" prop="id" :rules="[
            { required: true, message: '请选择授权用户'}
          ]">
          <el-select v-model="temp.id" filterable remote reserve-keyword placeholder="请输入关键词"
            :remote-method="remoteUserMethod" :loading="loading">
            <el-option v-for="item in userData" :key="item.id" :label="item.nickname" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" :loading="loading" @click="assignUser()">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    fetchRoteUserList,
    fetchSearchUser,
    fetchAssignUser,
    fetchRevokeUser
  } from '@/api/role.js'

  export default {
    name: 'RoleUserList',
    components: {},
    data() {
      return {
        tableKey: 0,
        list: [],
        userData: [],
        total: 0,
        loading: false, // 提交中
        listLoading: true,
        dialogFormVisible: false,
        statusType: {
          '0': 'danger',
          '1': 'danger',
          '10': 'success'
        },
        statusString: {
          '0': '注销',
          '9': '待激活',
          '10': '正常'
        },
        userStatusString: {
          '0': '异常',
          '1': '正常',
          '10': '禁止登录'
        },
        userStatusType: {
          '-1': 'danger',
          '0': 'danger',
          '1': 'success',
          '10': 'danger'
        },
        sexOptions: [{
            name: '全部性别',
            value: ''
          },
          {
            name: '保密',
            value: -1
          },
          {
            name: '男',
            value: 1
          },
          {
            name: '女',
            value: 0
          }
        ],
        textMap: {
          update: '编辑',
          create: '添加'
        },
        currentUser: {},
        temp: {
          id: ''
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      handleCreate() {
        this.dialogFormVisible = true
      },
      //搜索用户
      remoteUserMethod(e) {
        let _this = this
        if (e !== '') {
          this.loading = true;
          fetchSearchUser({
            skey: e,
            role: this.$route.query.role
          }).then(res => {
            _this.userData = res.data.items
            _this.loading = false;
          }, err => {
            _this.loading = false;
          })
        }
      },
      getAvatarImage(url) {
        return this.$utils.getAvatarImage(url)
      },
      getList() {
        fetchRoteUserList(this.$route.query.role).then(res => {
          this.listLoading = false
          this.list = res.data.items
        }, rej => {
          this.listLoading = false
        })
      },
      //授权
      assignUser() {
        fetchAssignUser(this.$route.query.role, this.temp.id).then(res => {
          this.loading = false
          this.$notify({
            title: 'Success',
            message: '授权角色成功',
            type: 'success',
            duration: 3000
          })
          this.dialogFormVisible = false
          this.getList()
        }, rej => {
          this.loading = false
        })
      },
      getStatusType(status) {
        return this.statusType[status.toString()]
      },
      getStatusString(status) {
        return this.statusString[status.toString()]
      },
      getUserStatusType(status) {
        return this.userStatusType[status.toString()]
      },
      getUserStatusString(status) {
        return this.userStatusString[status.toString()]
      },
      handleDelete(row, index) {
        this.$confirm('此操作将删除用户角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true
              instance.confirmButtonText = '执行中...'

              fetchRevokeUser(this.$route.query.role, row.id).then((res) => {
                this.$notify({
                  title: 'Success',
                  message: '删除角色成功',
                  type: 'success',
                  duration: 2000
                })
                this.list.splice(index, 1)

                instance.confirmButtonLoading = false
                done()
              }, (err) => {
                instance.confirmButtonLoading = false
                done()
              })
            } else {
              done()
            }
          }
        })
      },

      jump(url) {
        this.$router.push(url)
      }
    }
  }
</script>

<style>
  .el-dialog {
    width: 550px;
  }

  .cate-icon {
    width: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .filter-container .filter-item {
    display: inline-block;
    vertical-align: middle;
  }
</style>
